<template>
    <fieldset>
        <legend>{{isLogin?'内容界面':"登入界面"}}</legend>
        <div class="content" v-if="isLogin">
            <h1>列表展示</h1>
            <button @click="isLogin=false">点击退出登录</button>
            <button @click="getList">点击获取列表</button>
             <h2>
                <img :src="userInfo.headimgurl" width="50">
               
                昵称:<a href="">{{userInfo.nickname}}</a>
                
                
            </h2>
            <ul>
                <li v-for="item in lists" :key="item._id">
                    <b>{{item.name}}</b>
                    <button v-has:read="permissionBtns">查看</button>
                    <button v-has:edit="permissionBtns">修改</button>
                    <button v-has:delate="permissionBtns">删除</button>
                    <button v-has:add="permissionBtns">增加</button>
                </li>
            </ul>


        </div>

        <!-- 登入页面 -->
        <div class="login" v-else>
            <h1>请登入</h1>
            <label for="username">用户名：</label>
            <input type="text" v-model="username">
            <br>
            <label for="password">密码：</label>
            <input type="text" v-model="password" @keydown.enter="isLogin=true">
            <br>
            <button @click="login">登入</button>

        </div>







    </fieldset>
</template>
<script src='http://chst.vip:8081/vue.js'></script>

<script>
        
        // 登录请求
        let loginApi=(params={})=>{
            return fetch('http://chst.vip/users/login',{
                method:"post",
                headers:{
                    'content-type':'application/json'
                },
                body:JSON.stringify(params)
            })
            .then(body=>body.json())
            .catch(err=>err.toString())
        }

        // 获取列表请求
        let getListApi=()=>{
            return fetch('http://chst.vip/students/getstulist?count=1',{
                method:"get",
                headers:{
                    "authorization":sessionStorage.getItem("user-token")
                }
            })
            .then(body=>body.json())
            .catch(err=>err.toString())
        }

        export default{
               directives:{
                    has:{
                        inserted(el,binding){
                        console.log(binding)
                        // 按钮权限
                        let role= binding.arg;
                        // 用户权限
                        let userRole=binding.value;
                        let hasRole = userRole.includes(role);
                        if(!hasRole){
                            el.parentNode.removeChild(el)
                        }
                    }

            }
        },
            data(){
                return{
                    username:'',
                    password:'',
                    isLogin:false,
                    userInfo:'',
                    lists:[],
                    permissionBtns:[]
                }
            },
            methods:{
                 async login(){
                    let res=await loginApi({username:this.username,password:this.password});
                    console.log(res)
                    if(res.state){
                        this.isLogin=true,
                        this.userInfo=res.userInfo,
                        // 
                        sessionStorage.setItem("user-token",res.token)
                        this.permissionBtns=res.permission.button;
                    }else{
                        alert(res.msg)
                    }

                },
                 async getList(){
                    let res =await getListApi()

                    // 
                    if(res.state){
                        // 请求成功
                        this.lists=res.data
                    } else{
                        alert(res.msg)
                    }
                },
                
            }
        }








</script>

<style sco nb ped>
     ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    li {
        /* border: 1px solid deeppink; */
        margin: 10px;
        max-width: 500px;
    }
</style>
